<header id="menu">
  <div class="header-wrapper">
    <nav class="main-nav">
      <a href="{{ site.url }}" title="Go to home page" class="logo-link">
        <img width="206" alt="PM2 logo" src="{{ site.url }}/assets/pm2-logo-1.png" />
      </a>
      <div class="menu">
        <a
          title="Open menu"
          href="#menu"
          class="button accent-border border-corners inner-shadows menu-button"
        >
          <div class="menu-icon"></div>
        </a>
        <a class="menu-overlay" href="#" title="Close the menu"></a>
        <div class="menu-content">
          <div class="doc-links">
            <a
              href="https://github.com/Unitech/pm2"
              title="Github Source Code">
              Github
            </a>
            <a
              href="{{ site.url }}/docs/usage/quick-start/"
              title="Go to Quick start"
              class="{% if page.url == '/docs/usage/quick-start/' %}current{% endif %}"
            >
              Quick start
            </a>
            <a
              href="{{ site.url }}/docs/usage/pm2-doc-single-page/"
              title="Go to Documentation"
              class="{% if page.url == '/docs/usage/pm2-doc-single-page/' %}current{% endif %}"
            >
              Documentation
            </a>
            <a
              href="{{ site.url }}/docs/usage/use-pm2-with-cloud-providers/"
              title="Go to Integrations"
              class="{% if page.url == '/docs/usage/use-pm2-with-cloud-providers/' %}current{% endif %}"
            >
              Integrations
            </a>
          </div>
          <a
            href="{{ site.register_url }}"
            title="Get started"
            class="button accent-border border-corners inner-shadows"
          >
            Monitor PM2
          </a>
        </div>
      </div>
    </nav>
  </div>
</header>
